<template>
    <div>
        <!-- 居民户用房管理 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/management' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>住房管理</el-breadcrumb-item>
            <el-breadcrumb-item>居民用房管理</el-breadcrumb-item>
        </el-breadcrumb>
        
        <!-- 模糊查询 -->
        <el-card>   
            <el-form ref="form" :model="houseSelectForm" :inline="true" label-width="80px">
                <el-row :gutter="10">
                    <el-form-item label="校区">
                        <el-input v-model="houseSelectForm.campuse"></el-input>
                    </el-form-item>
                    <el-form-item label="楼栋">
                        <el-input v-model="houseSelectForm.campuse"></el-input>
                    </el-form-item>
                    <el-form-item label="楼层">
                        <el-input v-model="houseSelectForm.campuse"></el-input>
                    </el-form-item>
                    <el-form-item label="房型">
                        <el-input v-model="houseSelectForm.campuse"></el-input>
                    </el-form-item>
                    <el-form-item label="房号">
                        <el-input v-model="houseSelectForm.campuse"></el-input>
                    </el-form-item>
                    <el-form-item class="miniMargin">
                        <el-button type="info">重置</el-button>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </el-card>
         <div class="features"></div>
        <el-card>
            <el-tabs tab-position="left" v-model="activeName" >
                <el-tab-pane label="住房查询" name="1">住房查询</el-tab-pane>
                <el-tab-pane label="租金管理" name="2">
                        <el-table :data="rentManagementList" :header-cell-style="{backgroundColor:'#f3f3f5'}" style="width:90%;margin-left:5%" stripe>
                            <el-table-column type="index" label="#"></el-table-column>
                            <el-table-column prop="houseName" label="房间"></el-table-column>
                            <el-table-column prop="retnName" label="租户"></el-table-column>
                            <el-table-column prop="rentData" label="租期"></el-table-column>
                            <el-table-column prop="rent" label="租金"></el-table-column>
                            <el-table-column prop="caozuo" label="操作">
                                <template slot-scope="">
                                    <!-- 编辑按钮 -->
                                    <el-button type="primary" icon="el-icon-edit" size="mini" ></el-button>
                                    <!-- 催收按钮 -->
                                    <el-tooltip effect="dark" content="催收" placement="top" :enterable="false">
                                        <el-button size="mini" type="warning" icon="el-icon-warning-outline"></el-button>
                                    </el-tooltip>
                                    <!-- 删除按钮 -->
                                    <el-button type="danger" icon="el-icon-delete" size="mini" ></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 租金管理分页 -->
                        <el-pagination
                            @size-change="rentSizeChange"
                            @current-change="rentCurrentChange"
                            :current-page="1"
                            :page-sizes="[10, 20]"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="20"
                            style="margin-left:5%">
                        </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="维修管理" name="3">
                    <el-table :data="rentManagementList" :header-cell-style="{backgroundColor:'#f3f3f5'}" style="width:90%;margin-left:5%" stripe>
                            <el-table-column type="index" label="#"></el-table-column>
                            <el-table-column prop="houseName" label="房间"></el-table-column>
                            <el-table-column prop="retnName" label="姓名"></el-table-column>
                            <el-table-column prop="rentData" label="工号"></el-table-column>
                            <el-table-column prop="rent" label="服务请求"></el-table-column>
                            <el-table-column prop="rentData" label="工号"></el-table-column>
                            <el-table-column prop="rent" label="手机号"></el-table-column>
                            <el-table-column prop="caozuo" label="时间">
                                <template slot-scope="">
                                    <el-button size="mini" type="warning">立即处理</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 租金管理分页 -->
                        <el-pagination
                            @size-change="rentSizeChange"
                            @current-change="rentCurrentChange"
                            :current-page="1"
                            :page-sizes="[10, 20]"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="20"
                            style="margin-left:5%">
                        </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="退房管理" name="4">退房管理</el-tab-pane>
                <el-tab-pane label="数据中心" name="5">数据中心</el-tab-pane>
            </el-tabs>
            
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 模糊查询表单
            houseSelectForm:{
                campuse:'',
            },
            // tabs激活的name
            activeName:'2',
            rentManagementList:{
                houseName:'',
                retnName:'',
                rentData:'',
                rent:'',
            },
            tableList:[
                {
                houseName:'11',
                retnName:'22',
                rentData:'33',
                rent:'44',  
                },
                {
                houseName:'11',
                retnName:'22',
                rentData:'33',
                rent:'44',  
                },
                {
                houseName:'11',
                retnName:'22',
                rentData:'33',
                rent:'44',  
                },  
                {
                houseName:'11',
                retnName:'22',
                rentData:'33',
                rent:'44',  
                },
                {
                houseName:'11',
                retnName:'22',
                rentData:'33',
                rent:'44',  
                },
                {
                houseName:'11',
                retnName:'22',
                rentData:'33',
                rent:'44',  
                }
            ]

        }
    },
    created(){
        this.getRentList()
    },
    methods: {
        // 租金模块
        getRentList(){
            this.rentManagementList = this.tableList;
        },
        rentSizeChange(){},
        rentCurrentChange(){}
    },
}
</script>
<style scoped>
</style>
